<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../element-plus/index.css" />
  </head>
  <body>
    <div id="box">
      <button @click="init()">初始化</button>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          prop="empNo"
          label="员工编号"
          width="180"
        ></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="hiredate" label="入职日期"></el-table-column>
      </el-table>
    </div>

    <script src="../vue3.2.45.js"></script>
    <script src="../axios.min.js"></script>
    <script src="../element-plus/element-plus.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            tableData: [],
          };
        },
        created() {
          axios.get("table.json").then((response) => {
            this.tableData = response.data;
            // this.tableData = response.data.data.list;
          });
        },
        mounted() {},
        methods: {
          init() {},
        },
      });

      app.use(ElementPlus);
      app.mount("#box");
    </script>
  </body>
</html>
